<template>
  <div class="p-4">
    <GrowCard :loading="loading" :dataTotal="dataTotalRef" :dataTotalMonth="dataTotalMonthRef" class="enter-y" />
<!--    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />-->
    <div class="md:flex enter-y">
      <VisitRadar class="w-full" :guangdian="guangdianRef" :loading="loading" />
    </div>

    <div class="md:flex enter-y">
      <VisitSource class="w-full" :fengdian="fengdianRef" :loading="loading" />
    </div>

    <div class="md:flex enter-y">
      <SalesProductPie class="w-full" :yadian="yadianRef" :loading="loading" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import {nextTick, ref} from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  import VisitSource from './components/VisitSource.vue';
  import VisitRadar from './components/VisitRadar.vue';
  import SalesProductPie from './components/SalesProductPie.vue';
import {getDashboard} from "@/api/common";

  const loading = ref(true);

  const dataTotalRef = ref(0)
  const dataTotalMonthRef = ref(0)
  const guangdianRef = ref({})
  const fengdianRef = ref({})
  const yadianRef = ref({})

  nextTick(async () => {
    const { result: {
      dataTotal = 0,
      dataTotalMonth = 0,
      guangdian = {},
      fengdian = {},
      yadian = {},
    } } = await getDashboard();
    dataTotalRef.value = dataTotal
    dataTotalMonthRef.value = dataTotalMonth
    guangdianRef.value = guangdian
    fengdianRef.value = fengdian
    yadianRef.value = yadian

    loading.value = false;
  })
</script>
